<!-- 修改密码组件 -->
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm"
        style="height: 800px;">
        <el-form-item label="旧密码" prop="oldUserPassword">
            <el-input v-model.number="ruleForm.oldUserPassword" type="password" style="width: 200px;" />
        </el-form-item>

        <el-form-item label="新密码" prop="newUserPassword">
            <el-input v-model="ruleForm.newUserPassword" type="password" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">修改</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>

    </el-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import axios from '../../api/index';
import { ElMessage } from "element-plus";
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus'
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
// 从localStorage中获取存储的JSON字符串  
const userInfoJsonString = localStorage.getItem('userInfo')!; 

// 解析JSON字符串为JavaScript对象  
const userInfo = JSON.parse(userInfoJsonString);  

const router = useRouter();

const ruleFormRef = ref<FormInstance>()

const username = ref(userInfo.username);

const checkoldUserPassword = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入旧密码！'))
    } else if (!reg.test(value) || value.length < 6 || value.length > 12) {
        return callback(new Error("请输入6-12位数字字母组合密码"));

    }
    setTimeout(() => {
        axios.get('/user/findOldPassword?username=' + username.value + '&oldUserPassword=' + ruleForm.oldUserPassword)
            .then((resp) => {
                if (resp.code != 200) {
                    callback(new Error('原密码输入错误！'))
                }
                callback()
            })
    }, 1000)
}

const validatenewUserPassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入新密码！'))
    } else if (!reg.test(value) || value.length < 6 || value.length > 12) {
        return callback(new Error("请输入6-12位数字字母组合密码"));

    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入新密码！'))
    } else if (!reg.test(value) || value.length < 6 || value.length > 12) {
        return callback(new Error("请输入6-12位数字字母组合密码"));

    } else if (value !== ruleForm.newUserPassword) {
        callback(new Error("两次输入的内容不一致！"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    newUserPassword: '',
    checkPass: '',
    oldUserPassword: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    newUserPassword: [{ validator: validatenewUserPassword, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
    oldUserPassword: [{ validator: checkoldUserPassword, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios.put('/user/upassword?username=' + username.value + '&oldUserPassword=' + ruleForm.oldUserPassword + '&newUserPassword=' + ruleForm.checkPass)
                .then((resp) => {
                    if (resp.code == 203) {
                        ElMessage.success(resp.msg);
                        localStorage.removeItem('userInfo')
                        localStorage.removeItem('token')
                        localStorage.removeItem('longtoken')
                        router.push('/login')
                    }
                })
        } else {
            ElMessage.error('请输入正确的内容！')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}




</script>
<style scoped></style>
  